<template>
    <div class="home">
        <div class="tabItems">
            <span
                v-for="item in tabList"
                :key="item.key"
                @click="setTab(item.key)"
                class="tabItem"
                :class="{'active1': tabIndex==item.key}"
            >
                {{item.title}}
            </span>
        </div>
        <div :is="zujian"></div>
        <button @click="back" class="btn">返回</button>
    </div>
</template>

<script>
import childrenFirst from './childrenFirst';
import childrenSecond from './childrenSecond';
export default {
    name: 'Home',
    data() {
        return {
            tabList: [
                { key: 1, title: 'first'},
                { key: 2, title: 'second'}
            ],
            zujian: this.$cookies.get('tab_zujian') || 'childrenFirst',
            tabIndex: this.$cookies.get('tab_key') || 1
        }
    },
    components: {
        childrenFirst,
        childrenSecond
    },
    methods: {
        back() {
            this.$router.back();
        },
        setTab(key) {
            if(key == 1) {
                this.$cookies.set('tab_key', 1, 60+30);
                this.$cookies.set('tab_zujian', 'childrenFirst', 60+30);
                this.zujian = 'childrenFirst';
                this.tabIndex = 1;
            }else {
                this.$cookies.set('tab_key', 2, 60+30);
                this.$cookies.set('tab_zujian', 'childrenSecond', 60+30);
                this.zujian = 'childrenSecond';
                this.tabIndex = 2;
            }
        }
    }
}
</script>

<style lang="less">
.home {
    background-color: rgb(240,242,245);
    padding: 20px;
    height: 500px;
    position: relative;
    .tabItems {
        background-color: #fff;
        height: 50px;
        line-height: 50px;
        padding-left: 20px;
        .active1 {
            border-bottom: 2px solid rgb(254,109,20);
            color: rgb(254,109,20);
        }
        .active2 {
            border-bottom: 1px solid rgb(16,166,150);
            color: rgb(16,166,150);
        }
        .tabItem {
            cursor: pointer;
            font-size: 18px;
            margin-right: 10px;
            padding-bottom: 10px;
        }
    }
    .btn {
        width: 64px;
        height: 30px;
        border: 0;
        border-radius: 4px;
        cursor: pointer;
        position: absolute;
        right: 36px;
        top: 30px;
    }
}
</style>